<template>
  <div class="page-home">
    <button @click="setToken">登录设置token</button>
    <br />
    <p>{{ userInfo }}</p>
    <button @click="testMock">测试接口mock服务-GET</button>
    <br />
    <button @click="testPost">测试接口mock服务-POST</button>
  </div>
</template>

<script lang="ts" setup>
import http from "@/utils/http";

const userInfo = ref();

const setToken = () => {
  // 设置token
  localStorage.setItem(
    "token",
    Math.floor(Math.random() * 1000000000).toString()
  );
};

const testMock = () => {
  // 创建实例

  // 示例用法
  interface UserInfo {
    name?: string;
    age?: number;
    data?: object;
  }

  const params = { name: "John", age: 30 };
  // 获取用户信息
  http
    .get<UserInfo>("/user/info", params)
    .then((res) => {
      console.log("用户信息:", res);
      const data = res.data as UserInfo;
      userInfo.value = data;
    })
    .catch((error) => {
      // 错误已统一处理，这里可以处理特殊逻辑
      console.error(error);
    });
};

const testPost = () => {
  // // 创建文章
  const params = {
    content: "这是一篇测试文章。",
    title: "测试文章"
  };
  http
    .post<{ id: number }>("/article/add", params, { showError: false })
    .then((data) => {
      console.log("创建成功，ID:", data.id);
    });
};
</script>

<style scoped lang="scss">
.stu {
  padding: 10px;
  border: 1px solid blue;
}
</style>
